<template>
  <div class="quick-settings">
    <div class="settings-header">
      <h4>快速设置</h4>
    </div>
    
    <div class="settings-content">
      <!-- 样式预设 -->
      <div class="settings-group">
        <h5>样式预设</h5>
        <div class="preset-buttons">
          <el-button
            v-for="preset in stylePresets"
            :key="preset.name"
            size="small"
            @click="applyStylePreset(preset)"
          >
            {{ preset.name }}
          </el-button>
        </div>
      </div>
      
      <!-- 尺寸预设 -->
      <div class="settings-group">
        <h5>尺寸预设</h5>
        <div class="preset-buttons">
          <el-button
            v-for="preset in sizePresets"
            :key="preset.name"
            size="small"
            @click="applySizePreset(preset)"
          >
            {{ preset.name }}
          </el-button>
        </div>
      </div>
      
      <!-- 验证预设 -->
      <div class="settings-group" v-if="hasValidation(selectedComponent?.type)">
        <h5>验证预设</h5>
        <div class="preset-buttons">
          <el-button
            v-for="preset in validationPresets"
            :key="preset.name"
            size="small"
            @click="applyValidationPreset(preset)"
          >
            {{ preset.name }}
          </el-button>
        </div>
      </div>
      
      <!-- 快速操作 -->
      <div class="settings-group">
        <h5>快速操作</h5>
        <div class="quick-actions">
          <el-button
            size="small"
            @click="resetToDefault"
          >
            重置为默认
          </el-button>
          <el-button
            size="small"
            @click="copyComponent"
          >
            复制组件
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { CanvasComponent } from '../types'

interface Props {
  selectedComponent: CanvasComponent | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update-component': [component: CanvasComponent]
  'copy-component': [component: CanvasComponent]
}>()

// 样式预设
const stylePresets = [
  {
    name: '默认样式',
    style: {
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'solid',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0
    }
  },
  {
    name: '圆角样式',
    style: {
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'solid',
      borderColor: '#dcdfe6',
      borderWidth: 1,
      borderRadius: 20,
      padding: 12,
      margin: 0
    }
  },
  {
    name: '无边框',
    style: {
      fontSize: 14,
      color: '#303133',
      backgroundColor: '#ffffff',
      borderStyle: 'none',
      borderColor: '#dcdfe6',
      borderWidth: 0,
      borderRadius: 0,
      padding: 8,
      margin: 0
    }
  },
  {
    name: '强调样式',
    style: {
      fontSize: 14,
      color: '#ffffff',
      backgroundColor: '#409eff',
      borderStyle: 'solid',
      borderColor: '#409eff',
      borderWidth: 1,
      borderRadius: 4,
      padding: 8,
      margin: 0
    }
  }
]

// 尺寸预设
const sizePresets = [
  {
    name: '小尺寸',
    size: { width: 200, height: 32 }
  },
  {
    name: '标准尺寸',
    size: { width: 300, height: 40 }
  },
  {
    name: '大尺寸',
    size: { width: 400, height: 48 }
  },
  {
    name: '全宽',
    size: { width: 500, height: 40 }
  }
]

// 验证预设
const validationPresets = [
  {
    name: '无验证',
    validation: {
      validationRule: { type: 'none' }
    }
  },
  {
    name: '必填验证',
    validation: {
      validationRule: { type: 'required' }
    }
  }
]

// 应用样式预设
const applyStylePreset = (preset: any) => {
  if (!props.selectedComponent) return
  
  Object.assign(props.selectedComponent.props, preset.style)
  emit('update-component', props.selectedComponent)
  ElMessage.success(`已应用${preset.name}`)
}

// 应用尺寸预设
const applySizePreset = (preset: any) => {
  if (!props.selectedComponent) return
  
  Object.assign(props.selectedComponent.size, preset.size)
  emit('update-component', props.selectedComponent)
  ElMessage.success(`已应用${preset.name}`)
}

// 应用验证预设
const applyValidationPreset = (preset: any) => {
  if (!props.selectedComponent) return
  
  Object.assign(props.selectedComponent.props, preset.validation)
  emit('update-component', props.selectedComponent)
  ElMessage.success(`已应用${preset.name}`)
}

// 重置为默认
const resetToDefault = () => {
  if (!props.selectedComponent) return
  
  // 这里可以根据组件类型重置为默认值
  ElMessage.info('重置功能开发中...')
}

// 复制组件
const copyComponent = () => {
  if (!props.selectedComponent) return
  
  emit('copy-component', props.selectedComponent)
  ElMessage.success('组件已复制到剪贴板')
}

// 检查是否有验证功能
const hasValidation = (type: string | undefined): boolean => {
  return ['input', 'textarea'].includes(type || '')
}
</script>

<style scoped lang="scss">
.quick-settings {
  border-top: 1px solid #e4e7ed;
  background: #fafafa;
  
  .settings-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e4e7ed;
    
    h4 {
      margin: 0;
      color: #303133;
      font-size: 14px;
    }
  }
  
  .settings-content {
    padding: 16px;
    
    .settings-group {
      margin-bottom: 20px;
      
      h5 {
        margin: 0 0 12px 0;
        color: #606266;
        font-size: 13px;
        font-weight: 500;
      }
      
      .preset-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .el-button {
          font-size: 12px;
          padding: 4px 8px;
        }
      }
      
      .quick-actions {
        display: flex;
        gap: 8px;
        
        .el-button {
          font-size: 12px;
          padding: 4px 8px;
        }
      }
    }
  }
}
</style> 